<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>单个视频</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<link href="../../css/mui.css" rel="stylesheet"/>
	<link href="../../css/mui.min.css" rel="stylesheet"/>
	<link href="../../css/mui-icons-extra.css" rel="stylesheet"/>
	<link href="../../css/app.css" rel="stylesheet"/>
	<style type="text/css">
	</style>
</head>
<body>
	<!-- 头部HEADER -->
	<header class="mui-bar mui-bar-nav">
		<span class="mui-icon mui-icon-back" onclick="mui.back()"></span>
		<h1 class="mui-title" id="vname">单个视频</h1>
	</header>
	<br>
	<!-- 头部HEADER -->
	
	<!-- 首页视频布局 -->
	<div class="app-video-bg" id="refresh">
	</div>
	<!-- 首页视频布局 -->
	
	<!-- 底部菜单 -->
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item" onclick="jumpToIndex()">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item mui-active" onclick="jumpToMarket()">
			<span class="mui-icon mui-icon-download"></span>
			<span class="mui-tab-label">库</span>
		</a>
<!-- 		<a class="mui-tab-item" onclick="jumpToChat()">
			<span class="mui-icon mui-icon-chatbubble"></span>
			<span class="mui-tab-label">消息</span>
		</a> -->
		<a class="mui-tab-item" onclick="jumpToMy()">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	<!-- 底部菜单 -->
</body>
</html>


<script src="../../js/mui.js"></script>
<script src="../../js/app.js"></script>
<script type="text/javascript">
	var vid = getUrlParam('vid');
	//自动加载
	(function($, owner) {
		getIndex(); 
	}(mui, window.app = {}));
	//获取列表
	function getIndex(){
		var w = document.documentElement.clientWidth; //屏幕宽度
		var h = document.documentElement.clientHeight; //屏幕高度
		var resList = getIndexCache(); //数据缓存
		var list = resList.list;
		if (list.length==0) {
			mui.toast('没有数据',{ 
				duration:'long', type:'div',
			});
			setTimeout(function(){
				mui.back();
			}, 2000);
			return
		}
		var h = '';
		var vs = list;
		var videoId = 0; //去重用
		for (var i=0;i<vs.length;i++) {
			if (vs[i].videoId==vid && videoId!=vid) {
				var vheight = Math.round(w * vs[i].videoRatio);
				var vname = getStrLimitNum(vs[i].videoName); //显示有限字数
				h += '<div class="app-video" style="height:'+vheight+'px;">';
				h += '<video poster="'+vs[i].videoImg+'" src="'+vs[i].videoLink+'" type="video/mp4" name="media" height="'+vheight+'" controls="controls" autoplay="autoplay" loop class="app-video-tag"></video>';
				h += '<div class="app-video-title">'+vname+'</div>';
				h += '<div class="app-video-menu">';
				h += '<span class="mui-icon-extra mui-icon-extra-heart-filled app-video-grey"></span>';
				h += '<div class="app-video-grey">0</div>';
				h += '<div style="height: 8px;"></div>';
				h += '<span class="mui-icon mui-icon-chat app-video-grey"></span>';
				h += '</div>';
				h += '</div>';
				videoId = vid;
				mui("#vname")[0].innerHTML = vname;
			}
		}
		if (h=='') {
			mui.toast('没有数据',{ 
				duration:'long', type:'div',
			});
			setTimeout(function(){
				mui.back();
			}, 2000);
			return
		}
		mui("#refresh")[0].innerHTML = h;
	}
	//获取数据缓存
	function getIndexCache(){
		var resList = cacheGet(indexList);
		if (!resList) {
			var list = new Array(),  //数据数组
				idstring = '', //ID字符串集合
				page = { //分页参数
					// 当前页码，初始化为0
					pageStart: 0,
					// 每页记录数
					pageSize: 1,
					// 当前记录数
					pageTotal: 0
				};
			return {
				// 数据数组
				list: list,
				// 历史ID集合
				ids: idstring,
				// 分页
				page: page
			};
		}
		return resList;
	}
</script>